<template>
  <app-container>
    <app-block>
      <zm-button @click="operation('new')" t="edit" size="small" class="fr mb10">新建标签</zm-button>
      <zm-table-data :data="tableParams.data" :columns="columns" :fetch="loadList" :table-params="tableParams"></zm-table-data>
    </app-block>
    <new-tag v-if="newParams.visible" v-model="newParams.visible" :obj="newParams" @afterSave="loadList"></new-tag>
  </app-container>
</template>

<script>
import zmTableMixin from '@/mixins/zmTableMixin'
import { tableColumns } from './const'
import newTag from './components/newTag'
import api from '@/api'
export default {
  name: 'TagList',
  components: {
    newTag
  },
  mixins: [zmTableMixin],
  data () {
    return {
      newParams: {
        visible: false,
        id: ''
      }
    }
  },
  computed: {
    columns () {
      return tableColumns(this)
    }
  },
  created () {

  },
  methods: {
    async loadList () {
      const _res = await api.commodityLabel.getPageList(this.assignQuery({}))
      this.initialTableData(_res.list, _res.count)
    },
    operation (type, row) {
      switch (type) {
        case 'new':
          this.newParams = {
            visible: true,
            id: ''
          }
          break
        case 'edit':
          this.newParams = {
            visible: true,
            id: row.id
          }
          break
        case 'del':
          this.$confirm(`是否确认删除该标签，删除将不显示此标签，请谨慎操作`, '操作提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定删除',
            type: 'warning'
          }).then(async () => {
            await api.commodityLabel.delete({
              id: row.id
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.loadList()
          })
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss">
.lh30 {
  height: 30px;
  line-height: 30px;
}
</style>
